<template>
	<div class="container">
		<div class="header-box">
			<t-header :left-options="{preventGoBack: true, backText: '', showBack: true}" @on-click-back="onClickBack">
				付款提示
				<img slot="right" class="top-right-home" src="../../assets/top_msg.png" @click="showWishParams"/>
			</t-header>
		</div>

		<div class="pay-info">
			<p class="t1">获取完整方案需付款{{price != '' ? '￥' + this.getFormatPrice(price) : ''}}</p>
			<p class="t2">{{ planDes }}</p>
			<div class="pay">
				<div class="wx" @click="wxPay()">
					<img src="../../assets/wx.png" alt="">
					微信支付
				</div>
				<div class="ka" @click="kaPay()">
					<img src="../../assets/ka.png" alt="">
					预售卡支付
				</div>
			</div>
			<p class="alipay-tishi">如需使用“支付宝”付款，请下载淘志愿APP或访问淘志愿网站(www.tzhiyuan.net)。选择“历史订单”中“待支付”进行付款。</p>
		</div>
		<template v-if="type == 1">
			<p class="title">方案预览</p>
			<p class="desc">以下预览中将为你显示"冲一冲"、"平一平"、"保一保"各2个志愿</p>
			<div class="yulan" v-if="radicalMajorListPreview.length > 0">
				<p class="tit">冲一冲</p>
				<wishplan-item v-for="item in radicalMajorListPreview" :planinfo="item"/>
			</div>
			<div class="yulan ping" v-if="normalMajorListPreview.length > 0">
				<p class="tit">平一平</p>
				<wishplan-item v-for="item in normalMajorListPreview" :planinfo="item"/>
			</div>
			<div class="yulan bao" v-if="conservativeMajorListPreview.length > 0">
				<p class="tit">保一保</p>
				<wishplan-item v-for="item in conservativeMajorListPreview" :planinfo="item"/>
			</div>
		</template>
	</div>
</template>

<script>
import THeader from 'components/THeader';
import WishplanItem from '../wishplan/WishplanItem';
import {Toast, Indicator} from 'mint-ui';
import {getPreViewContent} from 'api/new-api';
import pingpp from 'pingpp-js';
import {reqPingCharge} from 'api/appointment-api';
import {getQueryParams} from 'utils/url-query-param';

export default {
	name: 'WechatPay',
	components: {
		THeader,
		WishplanItem,
	},
	data: function () {
		return {
			type: 2,
			planId: '',
			orderId: '',
			price: '',
			planDes: '',
			radicalMajorListPreview: [],
			normalMajorListPreview: [],
			conservativeMajorListPreview: [],

			origin: 'history',
		}
	},
	mounted: function(){
		let paramObj = getQueryParams();
		// console.log(paramObj);

		this.type = undefined != paramObj.type ? paramObj.type : 2;

		this.origin = paramObj.origin;

		getPreViewContent(paramObj.planId).then((data) => {
			if (data.code == 1) {
				let result = data.result;
				if (result.payStatus == 1) {
					if (this.type == 1) {
						window.location.href = "wishplanresult.html?showTitle=true&planId=" + result.planId + '&from=' + encodeURIComponent(this.origin != 'history' ? 'wishplanCreate.html' : 'historyPlan.html');
					}else{
						window.location.href = "assessmentResult.html?showTitle=true&planId=" + result.planId + '&from=' + encodeURIComponent(this.origin != 'history' ? 'assessment.html' : 'historyPlan.html');
					}
				}
				if (result.payStatus == 0) {
					this.planId = result.planId;
					this.orderId = result.orderId;
					this.price = result.price;
					this.planDes = result.planDes;
					this.radicalMajorListPreview = undefined != result.radicalMajorListPreview ? result.radicalMajorListPreview : [];
					this.normalMajorListPreview = undefined != result.normalMajorListPreview ? result.normalMajorListPreview : [];
					this.conservativeMajorListPreview = undefined != result.conservativeMajorListPreview ? result.conservativeMajorListPreview : [];
				}
			}else{
				alert(data.msg);
				this.onClickBack();

			}
		}).catch((error) => {
			if(typeof error === 'object') {
				let str = JSON.stringify(error);
				if(str && str.indexOf('code') != -1) {
					Toast(error.msg);
					return;
				}
			}
			Toast({
				message: '获取信息失败！',
				duration: 2500
			});
		});
	},
	methods: {
		onClickBack: function () {

			if (this.origin == 'wishplan') {
				window.location.href = 'wishplanCreate.html';
			}else if (this.origin == 'assessment') {
				window.location.href = 'assessment.html';
			}else{
				window.location.href = 'historyPlan.html';
			}
		},
		showWishParams: function () {
			location.href = 'wishplanParams.html?planId=' + this.planId + '&fromUrl=' + encodeURIComponent(location.href);
		},
		//格式化价格
        getFormatPrice: function (price) {
            let p = price /100 + '';
            if(p == 'NaN')
                return '0.00';
            else
                return p;
        },
		wxPay: function(){

			let orderId = this.orderId;
			let planId = this.planId;
			let planType = 1;

            let type = 1;
            let couponId = null;

            let wxOpenId = localStorage.TzyWxOpenId;

            Indicator.open({
              text: '数据加载中...',
              spinnerType: 'fading-circle'
            });

			reqPingCharge(planId, planType, 'wx_pub', type, couponId, wxOpenId)
              .then((data) => {
                  Indicator.close();

                  let chargeInfo = JSON.stringify(data.result);

				  let _this = this;

                  pingpp.createPayment(chargeInfo, function(result, err){
                	if (result == "success") {
                      // 只有微信公众账号 wx_pub 支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL。
                      if (_this.type == 1) {
                      	  window.location.href = "wishplanresult.html?showTitle=true&planId=" + _this.planId + '&from=' + encodeURIComponent(_this.origin != 'history' ? 'wishplanCreate.html' : 'historyPlan.html');
                      }else{
						  window.location.href = "assessmentResult.html?showTitle=true&planId=" + _this.planId + '&from=' + encodeURIComponent(_this.origin != 'history' ? 'assessment.html' : 'historyPlan.html');
					  }
                    } else if (result == "fail") {
                      // charge 不正确或者微信公众账号支付失败时会在此处返回
                        Toast("支付失败");
                    } else if (result == "cancel") {
                      // 微信公众账号支付取value_name:value,消支付
                        Toast('支付已取消');
                    }

                  });
              })
              .catch((error) => {
                  Indicator.close();
                  if(typeof error === 'object') {
                      let str = JSON.stringify(error);
                      if(str && str.indexOf('code') != -1) {
                          Toast(error.msg);
                          return;
                      }
                  }
              })
		},
		kaPay: function(){
			location.href = 'wechatka.html?planId=' + this.planId + '&orderId=' + this.orderId + '&origin=' + this.origin + '&type=' + this.type;
		},
	},
	deactivated: function () {
		//由于使用keep-alive，退出该界面是直接手动destroy
		this.$destroy(this);
	},

}
</script>

<style scoped>
p {
	margin: 0;
}
.container {
	width: 100%;
}

.header-box {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
}


.my-content {
	position: absolute;
	top: 44px;
	left: 0px;
	right: 0px;
	-webkit-overflow-scrolling: touch;
	width: 100%%;
}


.top-right-home {
	width: 25px;
	height: 25px;
}

.pay-info {
	background: #ffffff;
	margin-top: 46px;
}

.pay-info .t1 {
	color: #333333;
	font-size: .9rem;
	font-weight: bold;
	padding-top: 34px;
	text-align: center;
}

.pay-info .t2 {
	color: #373737;
	font-size: .75rem;
	padding: 13px 23px;
}

.pay-info .alipay-tishi {
	color: #666666;
	font-size: .7rem;
	/* text-align: center; */
	padding: 0 23px 13px 23px;
}

.pay {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;

	padding: 0 18px 18px;
}

.pay .wx {
	border: 1px solid #1EC11E;
	border-radius: 4px;
	color: #1EC11E;
	font-size: .8rem;
	height: 1.6rem;
	line-height: 1.6rem;
	padding-left: .625rem;
	/* width: 7.2rem; */
	width: 40%;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.pay .wx img {
	width: .825rem;
	margin-right: 10px;
}
.pay .ka {
	border: 1px solid #F8481F;
	border-radius: 4px;
	color: #F8481F;
	font-size: .8rem;
	height: 1.6rem;
	line-height: 1.6rem;
	padding-left: .625rem;
	/* width: 7.2rem; */
	width: 40%;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.pay .ka img {
	width: .825rem;
	margin-right: 5px;
}

.title {
	color: #61C0E2;
	font-size: .85rem;
	padding: 13px 13px 4px 13px;
	text-align: center;
}
.desc {
	color: #61C0E2;
	font-size: .75rem;
	padding: 0 25px 13px 25px;
}

.yulan {
	background: #ffffff;
	padding-bottom: 20px;
	margin-bottom: 10px;
}

.yulan .tit {
	border-bottom: 1px solid #E6E6E6;
	color: #CCCCCC;
	font-size: .85rem;
	margin-left: 12px;
	padding-bottom: 6px;
	padding-top: 10px;
}

.container {
	margin-top: 0;
}

</style>
